<template>
  <div @click="sendCodeDelay" class="send-code">
    <CommonButton :title="content" />
  </div>
</template>

<script>
import { ref } from 'vue'

import CommonButton from './CommonButton.vue'

import { UseLoginStore } from '../../stores/request'
import { bus } from '../../utils/utils'

export default {
  name: 'SendCode',
  components: {
    CommonButton
  },
  setup() {
    const content = ref('发送验证码')
    const LoginStore = UseLoginStore()
    let isClick = false

    function sendCodeDelay() {
      if (!isClick) {
        isClick = true
        LoginStore.SendEmail(() => {
          bus.emit('errStyle', 'authcode')
        })

        let totaltime = 60
        content.value = '剩余' + totaltime + '秒'
        const timer = setInterval(() => {
          totaltime--
          content.value = '剩余' + totaltime + '秒'
          if (totaltime < 0) {
            content.value = '重新发送'
            clearInterval(timer)
            isClick = false
          }
        }, 1000)
      }
    }

    return {
      content,
      sendCodeDelay
    }
  }
}
</script>

<style lang="scss" scoped>
.send-code {
  margin-left: 20px;
  width: 130px;
  height: 100%;
  background-color: $primary;
  border-radius: 25px;
}
</style>
